@charset "UTF-8";
/**
 * 2010(c) www.jcaramel.com
 * This file is necessary to include on pages along with the jcaramel library.
 */

/* Utility classes */
.righty { float:right; }
.lefty  { float:left; }
.cleaner { clear:both; }

/* Icons and glyphs */
.icon-16{
	float:left;
	width:16px;
	height:16px;
	padding:0;
	border:none;
	margin:0px;
}

.icon-32{
	float:left;
	width:32px;
	height:32px;
	padding:0;
	border:none;
	margin:0px;
}

.glyph-16{
	display:inline-block;
	background-image:url(imgs/glyphs-16-source.png);
	width:16px; height:16px;
	margin:0; padding:0;
}

.glyph-columnheader-desc  { background-position:-16px 0px; }
.glyph-columnheader-asc   { background-position:-32px 0px; }
.glyph-checkbox-unchecked { background-position:-48px 0px; }
.glyph-checkbox-checked	  { background-position:-64px 0px; }
.glyph-unfold-selected	  { background-position:-80px 0px; }
.glyph-unfold		      { background-position:-96px 0px; }
.glyph-fold-selected	  { background-position:-112px 0px; }
.glyph-fold				  { background-position:-128px 0px; }
.glyph-columnheader-grip  { background-position:-144px 0px; }
.glyph-dropdown			  { background-position:0px -16px; }
.glyph-dropside			  { background-position:-16px -16px; }

/**
 * Toolbar
 */
ul.toolbar{
	display:inline-block;
	list-style:none;
	background:#f0f0f0;
	margin:0;
	padding:3px;
	border:solid 1px #999;
	border-radius:4px;
}

ul.toolbar li {
	border:solid 1px transparent;
	display:block;
	cursor:default; 
	font-size:13px;
}

ul.toolbar-horizontal li{
	float:left;
	margin:0 3px;
	padding:2px 3px;
}

ul.toolbar li .icon-16 { margin:2px 5px 0 0; }
ul.toolbar li .glyph-16 { margin-top:0; }

ul.toolbar li.selected{
	background:#76A9DC;
    border:solid 1px #06c;
    color:white;
}

/**
 * Menu
 */
ul.jc-menu{
	position:absolute;
	display:inline-block;
	list-style:none;
	padding:0;
	background-color:#f5f5f5;
	box-shadow:5px 5px 5px #888;
	border:solid 1px #aaa;
	margin:0;
	
}

ul.jc-menu li{
	display:block;
	padding:2px 3px 2px 3px;
	margin:2px 2px;	
	font-size:13px;
	cursor:default;
	color:black;
	text-align:left;
	clear:both;
}

ul.jc-menu li .icon-16, ul.jc-menu li .glyph-16{
	/*float:left;*/
	margin:2px 5px 0 0;
}

ul.jc-menu li.selected{
	color:white;
	background:#52BCE0 !important;
}

ul.jc-menu li.separator{
	border-top:solid 1px #aaa;
	border-bottom:solid 1px #fff;
	height:0px;
	padding:0;
	margin:5px 0;
}

ul.jc-menu li.widget{
	
}

ul.jc-menu li.label{
	margin:0;
	background:#999;
	color:white;
}

/**
 * ListView and TreeView styles
 */
.scrollable-view{
	overflow:auto;
	background:white;
	color:black;
	border: solid 1px #f0f0f0;
	border-left-color:#d0d0d0;
	border-top-color:#d0d0d0;
}

ul.listview, ul.listview ul{
	display:block;
	list-style:none;
	padding:0;
	margin:0;
}

ul.listview:focus{
	outline:none;
}

/**
 * ListView items
 */
ul.listview li{
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px; 
	 border-radius: 4px;
}

ul.listview li span{
	overflow:hidden;
	white-space:pre;
}

ul.listview li.hover{
	background-color:#DFF2F8;
}


ul.listview li span.secondary{
	color:#999;
	font-size:smaller;
}

ul.listview li.selected{
	background:#52BCE0 !important;
	color:white;
}

ul.listview li.selected div.glyph-fold   { background-position:-112px 0px;}
ul.listview li.selected div.glyph-unfold { background-position:-80px 0px; }

ul.listview li.selected span.secondary{
	color:#80CCE6;
}

/**
 * ListView detalis mode
 */
ul.listview-details li.node{
	margin:0;
}
ul.listview-details li{
	clear:both;
	float:left;
	margin:0 0 1px 0;
}

ul.listview-details li span{
	display:block;
	float:left;
	padding:2px 3px;
	cursor:default;
}

/**
 * ListView Tile mode
 */
ul.listview-tile li{
	float:left;
	margin:5px;
	padding:5px;
}

ul.listview-tile li span{
	display:block;
	overflow:hidden;
	padding:2px 3px;
	cursor:default;
}


/**
 * ListView Column Headers
 */
ul.listview li.column-headers{
	margin:0 !important;
	padding:0 !important;
	position:relative;
	position:0;
	background:white;
}

ul.listview li span.column-header{
	display:block !important;
	float:left !important;
	overflow:hidden;
	padding:2px 3px;
	cursor:default;
	background:#f0f0f0;
	border: solid 1px #f6f6f6;
	border-right-color:#d0d0d0;
	border-bottom-color:#d0d0d0;
	color:#777;
	padding:3px;
}

ul.listview li span.column-header:hover{
	color:black;
	background:#CEF0FE;
	border-right-color:#84D6FB;
	border-bottom-color:#84D6FB;
}

ul.listview li.column-headers .order-asc, ul.listview li.column-headers .order-desc{
	color:#333;
	background-color:#DFF0F7;
	border-right-color:#BAE3F6;
	border-bottom-color:#BAE3F6;
}

/*
 * Hint widget
 * */

label.hint {
	position:absolute;
	background:none;
	color:gray;
	cursor:text;
	white-space:pre;
	overflow:hidden;
}

/**
 * Loader widget
 */
div.loader{ position:absolute; text-align:center; }

div.loader-image	{ display:inline-block; width:50px; height:50px; margin:1em; }

div.loader-text		{ display:inline-block; font-size:x-small; padding:3px 1em; }

div.loader-white	{ background:url(imgs/loader-white-bg.png); }
div.loader-black	{ background:url(imgs/loader-black-bg.png); }
div.loader-none		{ background:none; }

div.loader-image-1 { background:url(imgs/s01.png) center center no-repeat; }
div.loader-image-2 { background:url(imgs/s02.png) center center no-repeat; }
div.loader-image-3 { background:url(imgs/s03.png) center center no-repeat; }
div.loader-image-4 { background:url(imgs/s04.png) center center no-repeat; }
div.loader-image-5 { background:url(imgs/s05.png) center center no-repeat; }
div.loader-image-6 { background:url(imgs/s06.png) center center no-repeat; }
div.loader-image-7 { background:url(imgs/s07.png) center center no-repeat; }
div.loader-image-8 { background:url(imgs/s08.png) center center no-repeat; }
div.loader-image-9 { background:url(imgs/s09.png) center center no-repeat; }
div.loader-image-10 { background:url(imgs/s10.png) center center no-repeat; }
div.loader-image-11 { background:url(imgs/s11.png) center center no-repeat; }
div.loader-image-12 { background:url(imgs/s12.png) center center no-repeat; }
div.loader-image-13 { background:url(imgs/s13.png) center center no-repeat; }
div.loader-image-14 { background:url(imgs/s14.png) center center no-repeat; }
div.loader-image-15 { background:url(imgs/s15.png) center center no-repeat; }
 
div.loader-white div.loader-text  { color:black; }
div.loader-black div.loader-text  { color:white; background:black; border-radius:20px; }
div.loader-none  div.loader-text  { color:white; background:black; border-radius:20px; }
